<script setup lang="ts">
import useUserStore from '@/stores/user'

const userStore = useUserStore()

const router = useRouter();
const formData = reactive({
  username: 'admin',
  password: '', //123456
})

const login = () => {
  userStore.loginAccount(formData).then(async () => {
    ElMessage.success('登录成功')
    router.push('/')
  })
}

// 标题
const title = ref(import.meta.env.VITE_APP_TITLE)
</script>
<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-content-box">
        <img src="@/assets/images/login-banner.jpg" alt="" srcset="" />
        <div class="login-content-right-box">
          <H3>欢迎登录{{title}}</H3>
          <el-form class="form-box" ref="formRef" :model="formData">
            <el-form-item>
              <el-input size="large" v-model="formData.username" placeholder="请输入账号" prefix-icon="User"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input size="large" type="password"  v-model="formData.password" placeholder="请输入密码" prefix-icon="Lock"></el-input>
            </el-form-item>
            <el-button size="large" style="width: 100%" type="primary" @click="login">登录</el-button>
          </el-form>
          <!-- <div class="footer-box">注册</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(@/assets/images/login-bg.jpg);
  background-size: cover;
  background-position: 50%;
  .login-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    align-items: center;
    .login-content-box {
      background-color: #fff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      overflow: hidden;
      height: 300px;
      .login-content-right-box {
        padding: 0 20px;
        h3 {
          text-align: center;
          color: #446ff1;
          padding-bottom: 20px;
        }
        .form-box {
          width: 280px;
        }
        .footer-box {
          margin-top: 10px;
          text-align: right;
          color: #446ff1;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
